<template>
  <main class="error-page">
    <header class="error-header">
      <h1 class="error-title">404 - 页面未找到</h1>
      <p class="error-subtitle">您访问的页面不存在或已被移除</p>
    </header>

    <section class="error-content">
      <div class="error-image">
        <img src="@/assets/img/404.png " alt="页面未找到" aria-hidden="true">
      </div>

      <div class="error-info">
        <h2 class="info-title">可能的原因：</h2>
        <ul class="info-list">
          <li>URL 拼写错误</li>
          <li>页面已被永久删除</li>
          <li>链接已过期</li>
        </ul>

        <div class="error-actions">
          <router-link to="/" class="btn-home">
            <i class="fa fa-home mr-2"></i>返回首页
          </router-link>
          <button class="btn-refresh" @click="reloadPage">
            <i class="fa fa-refresh mr-2"></i>刷新页面
          </button>
        </div>
      </div>
    </section>

    <footer class="error-footer">
      <p>如果您认为这是一个错误，请联系我们的技术支持团队</p>
    </footer>
  </main>
</template>

<script>
export default {
  name: 'NotFound',
  methods: {
    reloadPage() {
      window.location.reload();
    }
  }
}
</script>

<style scoped lang="scss">
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 2rem;
  text-align: center;
}

.error-header {
  margin-bottom: 2rem;
}

.error-title {
  font-size: 3rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.error-subtitle {
  font-size: 1.2rem;
  color: #666;
}

.error-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 2rem;
}

.error-image {
  flex: 1;
  min-width: 300px;
}

.error-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.error-info {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.info-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.info-list {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}

.info-list li {
  margin-bottom: 0.5rem;
  color: #555;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-home,
.btn-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-home {
  background-color: #409EFF;
  color: white;
  border: 1px solid #409EFF;
}

.btn-home:hover {
  background-color: #308EEF;
}

.btn-refresh {
  background-color: white;
  color: #606266;
  border: 1px solid #DCDFE6;
}

.btn-refresh:hover {
  background-color: #F5F7FA;
}

.error-footer {
  color: #999;
  font-size: 0.9rem;
}
</style>